/* <template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item>
			<a href="/main">首页</a>
		</el-breadcrumb-item>
		<el-breadcrumb-item>留言管理</el-breadcrumb-item>
	</el-breadcrumb>
	<!-- 搜索框 -->
	<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
		<el-form-item label="留言">
			<el-input v-model="queryInfo.leaveContent" placeholder="请输入留言" clearable @clear="queryDataList" />
		</el-form-item>
		<el-form-item label="回复">
			<el-input v-model="queryInfo.reply" placeholder="请输入回复" clearable @clear="queryDataList" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" size="large" @click="queryDataList">搜索</el-button>
			<el-button type="danger" size="large" @click="batchremove">批量删除</el-button>
		</el-form-item>
	</el-form>

	<!-- 表格 -->
	<el-table :data="dataList" border style="width: 100%" row-key="id" @selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55px" />
		<el-table-column prop="id" label="ID" width="" align="center"></el-table-column>
		<el-table-column prop="leaveContent" label="留言" align="center" width="300px"></el-table-column>
		<el-table-column prop="reply" label="回复" align="center" width="300px"></el-table-column>
		<el-table-column prop="user.username" label="用户名" align="center"></el-table-column>
		<el-table-column label="咨询师名" align="center">
			<template #default="scope">
				{{ scope.row.counselor?.counselorName || '无' }}
			</template>
		</el-table-column>
		<el-table-column label="回复状态" align="center">
			<template #default="scope">
				<el-tag :type="scope.row.status === 0 ? 'success' : 'warning'">
					{{ statusMap[scope.row.status] }}
				</el-tag>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="300" align="center">
			<template #default="scope">
				<el-button type="primary" size="small" @click="edit(scope.row)">回复</el-button>
				<el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
				<el-button type="primary" size="small" @click="show(scope.row.leaveContent)">查看详细内容</el-button>
			</template>
		</el-table-column>
	</el-table>

	<div class="demo-pagination-block">
		<div class="demonstration"></div>
		<el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
			:page-sizes="[5, 10, 15, 20]" :size="defaults" layout="total, sizes, prev, pager, next, jumper"
			:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>

	<el-dialog :title="title1" v-model="dialogFormVisible" width="850" @close="cancle">
		<el-form :model="cwData" label-width="100">
			<el-form-item label="用户名">
				<el-input v-model="cwData.user.username" autocomplete="off" readonly></el-input>
			</el-form-item>
			<el-form-item label="留言内容" prop="leaveContent">
				<el-input v-model="cwData.leaveContent" readonly />
			</el-form-item>
			<el-form-item label="回复内容" prop="reply">
				<el-input v-model="cwData.reply" autosize type="textarea" placeholder="请输入回复内容" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancle">取 消</el-button>
				<el-button type="primary" @click="confirm">
					确 定
				</el-button>
			</div>
		</template>
	</el-dialog>

	<el-dialog :title="查看详细内容" v-model="dialogFormVisible1" width="600px">
		<div class="detail-content">{{ leaveContent }}</div>
		<template #footer>
			<el-button @click="dialogFormVisible1 = false">关闭</el-button>
		</template>
	</el-dialog>

</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue';

	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';

	import {
		Plus
	} from '@element-plus/icons-vue'

	import Editor from 'vue-vuecmf-editor';

	const total = ref(0)

	const queryInfo = reactive({
		id: '',
		leaveContent: '',
		reply: '',
		userId: '',
		counselorId: '',
		status: '',
		del: '',
		pageNum: 1,
		pageSize: 10
	})

	const statusMap = {
		0: '已回复',
		1: '未回复',
	};

	const dataList = ref([])
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;

	const queryDataList = () => {
		axios.get('counselorLeaveword/page', {
			params: queryInfo
		}).then((resp) => {
			if (resp.code == 200) {
				dataList.value = resp.data.list;
				total.value = resp.data.total;
			} else {
				ElMessage.error('查询失败')
			}
		})
	}


	const title1 = ref()
	const dialogFormVisible = ref(false)


	onMounted(() => {
		queryDataList()

	})

	const handleSizeChange = (val) => {
		queryDataList()
	}

	const handleCurrentChange = (val) => {
		queryDataList()
	}

	const cwData = ref({
		id: '',
		leaveContent: '',
		reply: '',
		user: {
			username: ''
		},
		counselor: {
			counselorName: ''
		},
		status: '',
		counselorId: ''
	})

	const add = () => {
		title1.value = '新增'
		dialogFormVisible.value = true
	}

	const cancle = () => {
		console.log('你点击了取消按钮');
		cwData.value = {
			id: '',
			leaveContent: '',
			reply: '',
			user: {
				username: ''
			},
			counselor: {
				counselorName: ''
			},
			status: '',
			counselorId: ''
		}
		dialogFormVisible.value = false
	}

	const confirm = () => {
		if (cwData.value.id) {
			console.log('你点击了确定按钮');
			axios.put('counselorLeaveword', cwData.value)
				.then((resp) => {
					if (resp.code == 200) {
						ElMessage({
							message: '回复成功',
							type: 'success',
						})
					} else {
						ElMessage.error('回复失败')
					}
					queryDataList()
					dialogFormVisible.value = false
				})
		}
	}

	const edit = (row) => {
		console.log(row);
		title1.value = '回复'
		dialogFormVisible.value = true
		row.id = row.id + ''
		row.userId = row.userId + ''
		row.leaveContent = row.leaveContent + ''
		row.reply = row.reply + ''
		row.counselorId = row.counselorId + ''
		cwData.value = row
	}

	const remove = (id) => {
		console.log(id);
		ElMessageBox.confirm(
				'此操作将永久删除该文件, 是否继续?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				axios.delete(`counselorLeaveword/${id}`)
					.then((resp) => {
						if (resp.code == 200) {
							ElMessage.success('删除成功')
						} else {
							ElMessage.error('删除失败')
						}
						queryDataList()
					})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消删除',
				})
			})
	}

	const multipleSelection = ref([]);

	const handleSelectionChange = (val) => {
		multipleSelection.value = val.map(item => {
			return item.id
		})
		console.log(multipleSelection.value);
	}

	const batchremove = () => {
		ElMessageBox.confirm(
				'此操作将永久删除该文件, 是否继续?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				axios.delete(`counselorLeaveword`, {
						params: {
							ids: multipleSelection.value.join(',')
						}
					})
					.then((resp) => {
						if (resp.code == 200) {
							ElMessage.success('删除成功')
						} else {
							ElMessage.error('删除失败')
						}
						queryDataList()
					})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消删除',
				})
			})
	}

	const leaveContent = ref('');
	const dialogFormVisible1 = ref(false)

	const show = (content) => {
		leaveContent.value = content;
		dialogFormVisible1.value = true;
	}
</script>

<style scoped>
	.el-breadcrumb {
		margin-bottom: 15px;
		padding: 0 0 15px;
		border-bottom: 1px solid #ddd;
	}

	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}

	.demo-form-inline .el-select {
		--el-select-width: 220px;
	}

	.demo-pagination-block .demonstration {
		margin-bottom: 16px;
	}

	.el-table {
		line-height: 40px;
	}
</style>